import React, { useState } from "react";
import { Tag, TreeSelect } from "antd";
import { treeData } from "./data";
// 引入工具函数
import { treeToFlat, getTwoDataList, getTreeAry, getTitleList } from "./tools";

import "antd/dist/antd.css";
import './style.css';

// App 组件
const App = async => {
  const [value, setValue] = useState([]);

  // 得到扁平化tree数组, 然后还得对相同的数组进行合并
  let dataList = treeToFlat(treeData)


  // 对dataList 进行合并处理
  const treeDataList = getTwoDataList(dataList)


  // 再次将扁平化数组转成树状结构
  const treeDataListTwo = getTreeAry(treeDataList)

  // 再次扁平化数组
  let dataListTwo = treeToFlat(treeDataListTwo)


  // 得到选中的title数组
  const titleList = getTitleList(value, dataListTwo)


  // 同步关闭事件
  const tagCloseHandler = index => {
    let newValue = [...value]

    newValue = newValue.filter((t, idx) => idx !== index && t)

    setValue(newValue)
  }


  return (
    <div className="App">
      <div>
        <h3>去重下拉选择组件</h3>
        <p>1、下拉组件居中</p>
        <p>2、下拉组件中选择改为勾选框实现</p>
        <p>3、一级分类改为选中所有子选项</p>
        <p>
          4、合并相同名称的选项，选中之后已选择 Value 中需要展示所有选中的 Value
          ，如“回锅肉”，需要合并为一个选项，选中之后展示为 0-0-2、0-0-5
        </p>
        <p>
          5、已选择名称中需要展示选择的名称，并且点击可以删除下拉框中的选中，逻辑和下拉组件中一致
        </p>
      </div>
      <div className="tags-box">
        <h3>已选择 Value：</h3>
        {value.join().split(',').join('、')}
        <h3>已选择名称：</h3>
        {
          titleList.map((t, idx, arr) => {
            return (
              <Tag closable
                key={idx}
                onClose={() => tagCloseHandler(idx)}
              >
                {t.title}
              </Tag>
            )
          })
        }
      </div>
      <div className="box">
        <div className="select-box">
          <TreeSelect
            value={value}
            style={{ width: "100%" }} // 样式
            treeCheckable //  多选框
            treeData={treeDataListTwo} // 数据源
            multiple // 多选
            placeholder="Please select" // 占位符
            treeDefaultExpandAll // 展开所有树节点
            onChange={setValue}
          />
        </div>
      </div>
    </div>
  );
}

export default App
